<template>
	<view class="content">
		<view class="header" v-if="clickFOU">
			<view class="mohu">
				
			</view>
			<view class="zhanwei">
			</view>
			<view class="biao_ti">
				<view class="top-text" @click="Fanhui()"><image src="../../../static/image/youjiantou (3).png" mode="scaleToFill"></image>{{ManData.title}}</view>
				<text></text>
			</view>
		</view>
		<view class="bofang_ti" @click="shuanji">
			<image v-show="ImgLaod" :src="ManData.images" mode="widthFix" @load="imgjiazai"></image>
		</view>
		<view class="bouttom_T" v-if="clickFOU">
			<p @click="up_top">上一话</p>
			<p @click="mulu">目录</p>
			<p @click="xia_ti">下一话</p>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="baidi">
				<view class="imgtext">
					<view class="right-text">
						<view class="M-name">{{Manxinxi.name}} <text style="font-size: 25rpx; color:#666666; font-weight: 100;">评分：{{ManData.pinfen}}</text></view>
						<text class="name-text">作者:{{Manxinxi.zuozhe}}</text>
						<text class="jianjie-text">{{Manxinxi.jieshao}}</text>
					</view>
				</view>
				<scroll-view :scroll-y="true" class="shikou">
					<view class="huaji" v-for="(item,index) in MUhuaji" :key="index" @click="clickHuaji(item)">
						<image :src="item.f_image" mode="aspectFill"></image>
						<view class="zhangjie">
							<text>{{item.title}}</text>
							<text>第{{index+1}}话</text>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import W_request from '../utis/api';
	export default {
		data() {
			return {
				//是否展示
				clickFOU:true,
				//漫画的信息展示
				Manxinxi:{
					image:'',
					name:'',
					zuozhe:'',
					jieshao:''
				},
				ManData:[],
				//图片高度
				heightimg:0,
				huaji:1,
				ManhuaID:0,
				//最有一话
				paixu:1,
				zonghua:0,
				//目录话几
				MUhuaji:[],
				//图片加载完显示
				ImgLaod:false
				
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中',
				mask:true
			});
			this.ManhuaID = e.id
			this.qingqiu()
		},
		methods: {
			//请求
			qingqiu(){
				W_request({
					url:"api/index/manhua",
					data:{
						manhuaid:this.huaji,
						sortid:this.ManhuaID
					}
				}).then(res=>{
					console.log(res)
					this.ManData = res.data.data;
					console.log(this.ManData)
					this.paixu = this.ManData.paixu;
					this.zonghua = this.ManData.panduan-1;
				},err=>{
					console.log(err)
				});
				//切换到某一个的  从头显示
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 10
				});
			},
			//加载
			imgjiazai(e){
				console.log(e.detail.height)
				if(e.detail.height>=1){
					uni.hideLoading();
					//图片没有加载出来不显示图片
					this.ImgLaod = true
				}
			},
			//返回
			Fanhui(){
				uni.navigateBack({
					data:1
				});
			},
			//点击显示
			shuanji(){
				if(this.clickFOU == true){
					this.clickFOU = false;
				}else{
					
					this.clickFOU = true;
				}
			},
			//上一话
			up_top(){
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				
				if(this.huaji<=1){
					uni.showToast({
						title: '已是第一话',
						duration: 1000,
						mask:true
					});
				}else{
					this.huaji = this.huaji-1;
					this.qingqiu();
					//图片没有加载出来不显示图片
					this.ImgLaod = false
				}
				
			},
			//目录
			mulu(){
				this.$refs.popup.open('bottom');
				W_request({
					url:"api/index/mulu",
					data:{
						sortid:this.ManhuaID
					}
				}).then(res=>{
					console.log(res)
					this.MUhuaji = res.data.data;
					this.Manxinxi.image = res.data.data[0].f_image;
					this.Manxinxi.name = res.data.data[0].title;
					this.Manxinxi.zuozhe = res.data.data[0].author;
					this.Manxinxi.jieshao = res.data.data[0].content;
				},err=>{
					console.log(err)
				});
			},
			//下一话
			xia_ti(){
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				
				if(this.paixu !==this.zonghua){	
					this.huaji = this.huaji+1;
					this.qingqiu()
					//图片没有加载出来不显示图片
					this.ImgLaod = false;
				}else{
					uni.showToast({
						title: '已是最后一话',
						duration: 1000,
						mask:true
					});
				}
				
			},
			//目录话几
			clickHuaji(ke){
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				W_request({
					url:"api/index/manhua",
					data:{
						manhuaid:ke.paixu,
						sortid:this.ManhuaID
					}
				}).then(res=>{
					console.log(res)
					this.ImgLaod = false
					this.ManData = res.data.data;
					console.log(this.ManData)
					this.paixu = this.ManData.paixu;;
					this.huaji = this.ManData.paixu;
					this.zonghua = this.ManData.panduan-1;
				},err=>{
					console.log(err)
				});
				//切换到某一个的  从头显示
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 10
				});
				this.$refs.popup.close();
			},
			//px 转换 rpx
			pxToRpx(shuzhiH) {
				//获取当前屏幕宽度
			  let deviceWidth = uni.getSystemInfoSync().windowWidth;
			  let rpxs =  (750 / deviceWidth) * shuzhiH
			  return Math.floor(rpxs);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction:column;
		align-items: center;
		position: relative;
		.header{
			width: 100%;
			height:150rpx;
			background-color: rgba(19, 20, 22,0.7);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 100;
			padding-bottom: 20rpx;
			.zhanwei{
				width: 100%;
				height: 100rpx;
			}
			.biao_ti{
				width: 93%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				z-index: 50;
				.top-text{
					font-size: 40rpx;
					color:rgb(250,233,5);
					display: flex;
					align-items: center;
					font-family: "YouSheBiaoTiHei";
					image{
						width: 35rpx;
						height: 35rpx;
						transform: rotate(180deg);
						margin-right: 9rpx;
					}
				}
				.sousuo{
					width: 350rpx;
					height: 70rpx;
					background-color: #1a1a1a;
					border-radius: 100rpx;
					display: flex;
					align-items: center;
					position: relative;
					font-size: 26rpx;
					color: #e2e2e2;
					margin-left: 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
						margin-right: 15rpx;
					}
				}
			}
			
		}
		
		.bofang_ti{
			width: 100%;
			height: 100%;
			overflow: hidden;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image{
				width: 100%;
				background-color: #ffffff;
				padding-top: 100rpx;
			}
		}
	
		.bouttom_T{
			width: 100%;
			height: 100rpx;
			background-color: rgba(19, 20, 22,0.7);
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			p{
				font-size: 26rpx;
				color: #f0f0f0;
			}
		}
		
		.baidi{
			width: 100%;
			overflow: hidden;
			background-color: #fff;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			.imgtext{
				width:93%;
				overflow: hidden;
				// background-color: #e2e2e2;
				margin-top: 35rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				image{
					width: 260rpx;
					height: 360rpx;
					border-radius: 15rpx;
				}
				.right-text{
					display: flex;
					flex-direction: column;
					
					.M-name{
						width: 100%;
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 15rpx;
						display: flex;
						justify-content: space-between;
					}
					.name-text{
						width: 100%;
						font-size: 26rpx;
						color: #585858;
						margin-bottom: 15rpx;
					}
					.jianjie-text{
						width: 100%;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3; /* 超出几行省略 */
						overflow: hidden;
						font-size: 25rpx;
						color: #585858;
						margin-bottom: 30rpx;
					}
				}
			}
			
			.shikou{
				width: 93%;
				height: 850rpx;
				margin-top: 20rpx;
				overflow: hidden;
				.huaji{
					width: 100%;
					height:160rpx;
					overflow: hidden;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 300rpx;
						height: 160rpx;
						background-color: #1a1a1a;
						overflow: hidden;
					}
					.zhangjie{
						display: flex;
						flex-direction: column;
						width: 52%;
						height: 100%;
						text:nth-child(1){
							font-size: 30rpx;
						}
						text:nth-child(2){
							font-size: 26rpx;
							color: #585858;
							margin-top: 20rpx;
						}
					}
				}
			}
			
		}
	}
</style>
